@import "../../shared";

.plans-grid-next-comparison-grid {
	min-width: fit-content;
	border: solid 1px #e0e0e0;
	background: hsl(0, 0%, 100%);
	border-radius: 4px;
	margin: 0 auto;

	> .is-sticky-header-row {
		border-bottom: solid 1px #e0e0e0;
		background: #fff;
	}

	&.has-highlighted-plan {
		@include plans-grid-medium-large {
			margin-top: 43px; // enough to cover `plans-grid__popular-badge` repositioning (top: -43px)
		}
	}

	.plan-comparison-grid__header-cell {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding-top: 46px;
		padding-bottom: 20px;
		min-width: 0;

		&.is-placeholder-header-cell {
			display: none;
		}

		@include plans-grid-medium-large {
			padding-top: 34px;

			&.popular-plan-parent-class {
				justify-content: space-between;
				&::before,
				&::after {
					height: 100%;
					bottom: 0;
				}
			}

			&.plan-is-footer {
				padding-top: 50px;
				padding-bottom: 24px;
			}

			&.is-placeholder-header-cell {
				display: initial;
			}
		}

		@include plans-grid-large {
			&.plan-is-footer {
				padding-top: 110px;
			}
		}

		&.popular-plan-parent-class {
			.plan-features-2023-grid__popular-badge {
				&.is-current-plan {
					.plans-grid__plan-pill {
						background: #e0e0e0;
						color: var(--studio-gray-100);
					}
				}
			}
		}

		&.popular-plan-parent-class:not(.plan-is-footer) {
			.plan-features-2023-grid__popular-badge {
				width: 100%;
				background: #fff;
				z-index: 2;

				.plans-grid__plan-pill {
					top: 20px;
				}
			}

			@include plans-grid-medium-large {
				.plan-features-2023-grid__popular-badge {
					padding: 20px 0 25px;
					position: absolute;
					top: -43px;
					left: -1px;
					border-color: #e0e0e0;
					border-width: 1px 1px 0 1px;
					/* stylelint-disable-next-line */
					border-radius: 5px 5px 0 0;
					border-style: solid;
					transition: top 0.2s ease;
				}

				.popular-badge-is-stuck {
					top: -10px;
				}

				&.is-left-of-highlight {
					.plan-features-2023-grid__popular-badge {
						border-top-right-radius: 0;
					}
				}

				&.is-right-of-highlight {
					.plan-features-2023-grid__popular-badge {
						border-top-left-radius: 0;
						left: 0;
					}

					// fixes border alignment
					// on badge that is on the last popular plan but not last in row
					// (so second to last with last being a personal plan)
					&:not(:last-of-type) {
						&:not(.is-last-in-row) {
							.plan-features-2023-grid__popular-badge {
								border-left: 0;
								box-sizing: border-box;
								left: 1px;
							}
						}
					}

				}

				&:last-of-type {
					&:not(.is-only-highlight) {
						.plan-features-2023-grid__popular-badge {
							padding-right: 19px;
						}

						// fixes border alignment
						// on last popular plan that is not adjacent to another popular plan
						// (so last with second to last being a personal plan)
						&:not(.is-right-of-highlight) {
							.plan-features-2023-grid__popular-badge {
								padding-right: 20px;
							}
						}
					}
					// fixes border alignment
					// on last popular plan that is only popular plan (3 column layout)
					&.is-only-highlight {
						.plan-features-2023-grid__popular-badge {
							padding-right: 20px;
						}
					}
				}
			}
		}

		.plans-grid__plan-pill {
			font-family: Inter, $sans;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--studio-white);
			letter-spacing: 0.2px;
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			line-height: 1.25rem;
			padding: 0 9px;
			height: 20px;
			left: 20px;
			top: 20px;
			right: unset;
			border-radius: 4px;
			background-color: var(--studio-gray-80);
			text-transform: unset;

			@include plans-grid-medium-large {
				left: 15px;
			}
			@include plans-grid-large {
				top: 55px;
			}
		}
	}

	.plan-comparison-grid__plan {
		.gridicon {
			display: none;
		}

		.plan-comparison-grid__plan-title {
			color: var(--studio-gray-70);
			font-size: 0.875rem;
			font-weight: 500;
			text-align: center;
			text-wrap: balance;
			hyphens: auto;
		}

		%plan-comparison-grid__plan-subtitle,
		.plan-comparison-grid__plan-subtitle {
			color: var(--studio-gray-40);
			font-size: 0.75rem;
			text-align: center;
			line-height: 1.4;
			margin-bottom: 5px;
			text-wrap: balance;
			hyphens: auto;
		}
		&.title-is-subtitle .plan-comparison-grid__plan-title {
			@extend %plan-comparison-grid__plan-subtitle;
		}

		.plan-comparison-grid__plan-conditional-title {
			@extend %plan-comparison-grid__plan-subtitle;
			@include plans-grid-medium-large {
				color: unset;
				margin-bottom: 0;
			}
			text-wrap: balance;
			max-width: 160px;
			hyphens: unset;
		}

		&:not(.has-feature):not(.has-feature-label) {
			.plan-comparison-grid__plan-title,
			.plan-comparison-grid__plan-subtitle {
				text-decoration: line-through;
			}

			&.hide-unsupported-feature {
				.plan-comparison-grid__plan-title,
				.plan-comparison-grid__plan-subtitle {
					display: none;
				}
			}
		}

		@include plans-grid-medium-large {
			.plan-comparison-grid__plan-image,
			.plan-comparison-grid__plan-title,
			.plan-comparison-grid__plan-subtitle {
				display: none;
			}
			.gridicon {
				display: block;
			}
		}
	}
	.popular-plan-parent-class {
		position: relative;
		&:not(.is-right-of-highlight)::before,
		&::after {
			content: "";
			display: none;
			width: 1px;
			height: 140px;
			bottom: -20px;
			background: #e0e0e0;
			position: absolute;
		}
		&::before {
			left: -1px;
		}
		&::after {
			right: -1px;
		}

		@include plans-grid-medium-large {
			&::before,
			&:not(:last-of-type)::after {
				display: block;
			}
		}
	}

	.plan-comparison-grid__title {
		margin-top: 0;
		margin-bottom: 12px;
		font-size: $font-title-small;
		line-height: 1.2;
		color: var(--studio-gray-100);
		font-weight: 400;
	}

	.plan-comparison-grid__billing-info {
		flex-basis: 50px;
		color: var(--studio-gray-50);
		font-weight: 400;
		font-size: $font-body-extra-small;
		margin-bottom: 10px;
		min-height: 30px;
		line-height: 1.3;

		@include plans-grid-medium-large {
			margin: 7px 0 10px;
		}
	}

	.plans-grid-next-action-button {
		margin-bottom: auto;

		.plans-grid-next-action-button__content {
			min-height: 40px;
		}
	}

	.plans-grid-next-header-price {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}
